<template>
	<view class="mdlBox">
    <view v-if="type!=2">
      <view class="mdlBoxTitle">当前账户余额</view>
      <view class="mdlMoney">{{money}}</view>

      <view class="mdlBoxTitle">账单明细</view>
      <view >
        <view class="mdlBoxContent">
          <text class="time">收益时间</text>
          <text class="form">来源</text>
          <text class="number">数量</text>
        </view>
        <view class="mdlBoxContent select" v-for="(item,index) in dataList" :key="index">
          <text class="time">{{item.create_at}}</text>
          <text class="form">{{item.remark}}</text>
          <text class="number">{{item.num}}</text>
        </view>
        <rf-empty info="暂无账单" :isRecommendShow="false" v-if="dataList.length === 0"></rf-empty>
      </view>
    </view>
    <view v-else>
      <view class="mdlBoxTitle">累计总收益</view>
      <view class="mdlMoney">{{money}} <text>MDL</text></view>

      <view class="mdlBoxTitle">收益明细</view>
      <view >
        <view class="mdlBoxContent">
          <text class="time">收益时间</text>
          <text class="form">来源</text>
          <text class="number">数量</text>
        </view>
        <view class="mdlBoxContent select" v-for="(item,index) in dataList" :key="index">
          <text class="time">{{item.create_at}}</text>
          <text class="form">{{item.remark}}</text>
          <text class="number">{{item.num}}</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { accumulateIntegral , getIntegralList , getMdl , getIntegralListByType} from "@/api/product";
	export default {
		data() {
			return {
        money:'0.00',
        type:'0',
        user_integral:'0',
        lock_integral:'0',
        flag:true,
        page:1,
        dataList:[]
			};
		},
    onLoad(option){
		  this.type = option.type;
		  this.$get(`${getMdl}`, {}).then(async r => {
        this.user_integral = r.data.user_integral || 0;
        this.lock_integral = r.data.lock_integral || 0;
        if (option.type==0){
          this.money = this.user_integral
        }else if (option.type==1){
          this.money = this.lock_integral
        }
      }).catch(err => {
        console.log(err);
      })

		  if (option.type==1){
        uni.setNavigationBarTitle({
          title:'锁仓MDL'
        })
        this.getIntegralListByType(2)
      }else if (option.type==2){
        uni.setNavigationBarTitle({
          title:'推广收益'
        })
        this.initData()
        this.getIntegralList()
      }else {
        this.getIntegralListByType(1)
      }
    },
    onReachBottom() {
      if (this.flag){
        this.page += 1;
        if (this.type==1){
          this.getIntegralListByType(2)
        }else if (this.type==2){
          this.getIntegralList()
        }else {
          this.getIntegralListByType(1)
        }
      }
    },
    methods: {
      initData(){
        this.$get(`${accumulateIntegral}`, {}).then(async r => {
          this.money = r.data.accumulate_integral || '0.00'
        }).catch(err => {
          console.log(err);
        })
      },
      getIntegralListByType(type){
        this.$get(`${getIntegralListByType}`, {list_type : type,page:this.page,pagesize:20}).then(async r => {
          if (r.data.length !=20){
            this.flag = false;
          }
          this.dataList = [...this.dataList,...r.data];
        }).catch(err => {
          console.log(err);
        })
      },
      getIntegralList(){
        this.$get(`${getIntegralList}`, {page:this.page,pagesize:20}).then(async r => {
          if (r.data.length !=20){
            this.flag = false;
          }
          this.dataList = [...this.dataList,...r.data];
        }).catch(err => {

          console.log(err);
        })
      }
    }
	}
</script>

<style lang="less" >

page{
  background: #fff;
}
.mdlBox{
	width: 92%;
	margin: 0 auto;
}
.mdlBoxTitle{
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #343434;
	line-height: 60px;
}
.mdlMoney{
	color: #F87D29;
	font-size: 40upx;
	font-family: PingFang SC;
	font-weight: bold;
	margin-bottom: 30rpx;
  text{
    color: #000;
    font-size: 28upx;
    margin-left: 12upx;
  }
}
.mdlBoxContent{
	display: flex;
	width: 100%;
	color: #4D4B4B;
	font-weight: 700;
	font-size: 28upx;
	height: 66upx;
	align-items: center;
	text{
		flex: 1;
		text-align: center;
    line-height: 24upx;
	}
	.time{
		text-align: left;
    flex: 1.5;
	}
	.number{
		text-align: right;
	}
}
.select{
	font-size: 24upx;
	color: #666666;
}
</style>
